<template>
  <div class="edu-form-slider">
    <el-slider
      v-model="current_field"
      :show-tooltip="current_args.tooltip ? 'true' : 'false'"
      :min="$util.getDefValue(current_args.min, 0)"
      :max="$util.getDefValue(current_args.max, 100)"
      :show-input="showInputValue"
      :disabled="disabledValue"
      :[showStops]="true"
      :format-tooltip="format"
    />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    args: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      current_field: this.value,
      current_args: this.args
    };
  },
  computed: {
    showInputValue() {
      if (this.current_args.input == '1') {
        return true;
      }

      return null;
    },
    disabledValue() {
      if (this.current_args.disabled == '1') {
        return true;
      }

      return null;
    },
    showStops() {
      return this.current_args.showStops ? 'show-stops' : null;
    }
  },
  watch: {
    current_field(value) {
      this.$emit('update:value', value);
    },
    value: {
      handler(now, old) {
        this.current_field = now;
      }
    }
  },
  methods: {
    format: function(value) {
      return value + '%';
    }
  }
};
</script>
<style scoped>
.edu-form-slider {
  max-width: 600px;
}
</style>
